import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Day from './Day'
import { getWeatherForecast } from 'utils/Api'

class SevenDays extends Component {
  constructor(props) {
    super(props)
    this.state = {
      forecast: []
    }
  }
  componentDidMount() {
    const { feature } = this.props.feature
    const landId = feature.getId().replace('tb_farmland.', '')
    getWeatherForecast({landId})
      .then(({msg, result}) => {
        if (msg === '200') {
          this.setState({
            forecast: result || []
          })
        }
      })
  }
  render() {
    const len = 7 - this.state.forecast.length
    const nullArr = []
    for (let i = 0; i < len; i++) {
      nullArr.push(i)
    }

    return (
      <div className='seven-days'>
        {
          this.state.forecast.map((day) => 
            <Day key={day.date} day={day} />)
        }
        {
          nullArr.map((day, i) => 
            <Day key={i} day={null}/> )
        }
      </div>
    )
  }
}
SevenDays.propTypes = {
  feature: PropTypes.object,
}
export default SevenDays